<template>
  <!-- 设备状态时间轴 -->
  <div class="status-timeline mt16">
    <div class="timeline-container">
      <!-- 状态图例 -->
      <div class="legend">
        <div class="legend-item">
          <div class="color running"></div>
          <span>运行</span>
        </div>
        <div class="legend-item">
          <div class="color stopped"></div>
          <span>停机</span>
        </div>
        <div class="legend-item">
          <div class="color unplanned"></div>
          <span>未排产</span>
        </div>
      </div>

      <!-- 时间轴主体 -->
      <div class="timeline">
        <div class="timeline-body">
          <div
              v-for="(item, index) in sliceDataList"
              :key="index"
              :class="['timeline-segment', getStatusClass(item.status)]"
              :style="{ width: calculateWidth(item) + '%' }"
              @mouseover="showTooltip(item, $event)"
              @mouseout="hideTooltip"
          ></div>
        </div>

        <div class="timeline-footer">
          <div
              v-for="(time, index) in timelineMarks"
              :key="index"
              class="time-mark"
          >
            {{ time }}
          </div>
        </div>
      </div>
    </div>

    <!-- 悬浮提示框 -->
    <div
        v-if="activeTooltip"
        class="timeline-tooltip"
        :style="tooltipStyle"
    >
      <div class="tooltip-header">
        {{ getStatusText(activeTooltip.status) }}
      </div>
      <div class="tooltip-body">
        <div>开始时间: {{ formatTime(activeTooltip.startDateTime) }}</div>
        <div>结束时间: {{ formatTime(activeTooltip.endDateTime) }}</div>
        <div>持续时间: {{ calculateDuration(activeTooltip) }}分钟</div>
        <div>停机原因: {{ activeTooltip.reasonShutdown }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";

export default {
  props: {
    deviceCode: String,
    sliceDataList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeTooltip: null,
      tooltipPosition: { x: 0, y: 0 },
      tooltipWidth: 200 // 预估提示框宽度
    };
  },
  computed: {
    timelineMarks() {
      if (!this.sliceDataList.length) return [];
      const startTime = moment(this.sliceDataList[0].startDateTime);
      const endTime = moment(this.sliceDataList[this.sliceDataList.length - 1].endDateTime);
      const duration = endTime.diff(startTime, 'hours', true);

      const marks = [];
      const markCount = Math.min(6, Math.ceil(duration));

      for (let i = 0; i <= markCount; i++) {
        const time = moment(startTime).add(i * duration / markCount, 'hours');
        marks.push(time.format('HH:mm'));
      }

      return marks;
    },
    totalDuration() {
      if (!this.sliceDataList.length) return 0;

      const first = this.sliceDataList[0];
      const last = this.sliceDataList[this.sliceDataList.length - 1];
      return moment(last.endDateTime).diff(moment(first.startDateTime), 'minutes');
    },
    tooltipStyle() {
      // 判断是否靠近右侧边界（超过60%宽度）
      const isNearRightEdge = (this.tooltipPosition.x / window.innerWidth) > 0.6;

      return {
        left: isNearRightEdge
            ? (this.tooltipPosition.x - this.tooltipWidth - 20) + 'px'
            : (this.tooltipPosition.x + 10) + 'px',
        top: this.tooltipPosition.y + 10 + 'px'
      };
    }
  },
  methods: {
    getStatusClass(status) {
      switch(status) {
        case 1: return 'running';
        case 0: return 'stopped';
        case 2: return 'unplanned';
        default: return '';
      }
    },
    getStatusText(status) {
      switch(status) {
        case 1: return '运行中';
        case 0: return '停机中';
        case 2: return '未排产';
        default: return '';
      }
    },
    calculateWidth(item) {
      const duration = moment(item.endDateTime).diff(moment(item.startDateTime), 'minutes');
      return (duration / this.totalDuration) * 100;
    },
    calculateDuration(item) {
      return moment(item.endDateTime).diff(moment(item.startDateTime), 'minutes');
    },
    formatTime(time) {
      return moment(time).format('YYYY-MM-DD HH:mm:ss');
    },
    showTooltip(item, event) {
      this.activeTooltip = item;
      this.tooltipPosition = {
        x: event.clientX,
        y: event.clientY
      };
    },
    hideTooltip() {
      this.activeTooltip = null;
    }
  }
};
</script>

<style scoped lang="scss">
.status-timeline {
  background: #fff;
  padding:5px 16px;
  position: relative;
}

.timeline-container {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}

.legend {
  display: flex;
  margin-bottom: 20px;
  padding-left: 20px;

  .legend-item {
    display: flex;
    align-items: center;
    margin-right: 20px;

    .color {
      width: 16px;
      height: 16px;
      border-radius: 2px;
      margin-right: 5px;

      &.running {
        background-color: #50a47a;
      }

      &.stopped {
        background-color: #ef4848;
      }

      &.unplanned {
        background-color: #9E9E9E;
      }
    }
  }
}

.timeline {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 52px;
  padding-right: 20px;

}

.timeline-header {
  margin-bottom: 10px;

  .device-name {
    font-weight: bold;
    color: #333;
  }
}

.timeline-body {
  height: 20px;
  display: flex;
  background: #f5f5f5;
  border-radius: 10px;
  overflow: hidden;

  .timeline-segment {
    height: 100%;
    transition: all 0.3s;
    cursor: pointer;

    &.running {
      background-color: #50a47a;
    }

    &.stopped {
      background-color: #ef4848;
    }

    &.unplanned {
      background-color: #9E9E9E;
    }

    &:hover {
      opacity: 0.8;
      transform: scaleY(1.1);
    }
  }
}

.timeline-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;

  .time-mark {
    color: #666;
    font-size: 16px;
  }
}

.timeline-tooltip {
  padding: 10px;
  position: fixed;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 1000;
  pointer-events: none;
  width: 200px; /* 固定宽度防止变形 */
  max-width: 200px; /* 最大宽度 */

  .tooltip-header {
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
  }

  .tooltip-body {
    font-size: 12px;
    color: #666;

    div {
      margin-bottom: 3px;
    }
  }
}

.btns {
  margin-bottom: 16px;
  .title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
}
</style>